<template>
  <el-card>
    <div slot="header">
      <h3>商品SKU信息</h3>
    </div>
    <div>
      <el-row>
        <general-table
          :data-source="tableData"
          :columns="tableColumns"
          @handleChangeInputNumber="handleChangeInputNumber"
        />
      </el-row>
    </div>
    <SelectUnitDialog
      :visible.sync="mainUnitVisible"
      @getUnitInfo="handleReturnMainUnit"
    ></SelectUnitDialog>
    <!-- 选择产地弹框 -->
    <original-place-dialog
      :visible.sync="originalPlaceVisible"
      @getOriginalPlace="getOriginalPlaceFn"
    />
  </el-card>
</template>
<script>
import GeneralTable from '@/pages/commodity/modules/components/generalTable';
import SelectUnitDialog from '@/pages/commodity/components/SelectUnitDialog';
import OriginalPlaceDialog from '@/components/common/dialog/originalPlaceDialog';
/* constants */
import {
  singleAddSkuInfoColumnsFn,
  getBasicKeysFunc
} from '../constants/basicInfo/packageList';
/* utils */
import { getSkuVolumnByCalculate } from '@/utils/getUtils';
export default {
  components: {
    GeneralTable,
    SelectUnitDialog,
    OriginalPlaceDialog
  },
  props: {
    packageList: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      tableColumns: [],
      storageCurrentRowData: {},
      mainUnitVisible: false,
      originalPlaceVisible: false,
    }
  },
  mounted () {
    this.tableColumns = singleAddSkuInfoColumnsFn({
      handleChooseMainUnit: this.handleChooseMainUnit,
      handleChooseOriginalPlace: this.handleChooseOriginalPlace
    })
  },
  computed: {
    /* 表格数据源 */
    tableData () {
      const {
        skuNoMap,
        mainUnit,
        mainUnitUuid,
        addPriceType
      } = this.packageList;
      return this.getPackageListFunc({
        skuNoMap,
        mainUnit,
        mainUnitUuid,
        addPriceType
      });
    }
  },
  methods: {
    /**
     * 初始化各层数数据的方法
     * @layer 层数 --- 单层、一层、二层、三层
     * @mainUnit 计量单位
     * @mainUnitUuid 计量单位uuid
    */
    initSkuDetailsFunc (layer, mainUnit, mainUnitUuid) {
      let data = {};
      data[`${layer}PackageUnit`] = mainUnit || null;
      data[`${layer}PackageUnitUuid`] = mainUnitUuid || null;
      data[`${layer}PackageCount`] = null;
      data[`${layer}Edge1`] = null;
      data[`${layer}Edge2`] = null;
      data[`${layer}Edge3`] = null;
      data[`${layer}Volume`] = null;
      data[`${layer}Weight`] = null;
      return data;
    },
    /* 获取sku信息数据的方法 */
    getPackageListFunc (data) {
      let { skuNoMap, mainUnit, mainUnitUuid, addPriceType } = data;
      let skuInfoList = [];
      for (let key in skuNoMap) {
        skuInfoList.push({
          ...getBasicKeysFunc({ skuName: key, skuNo: skuNoMap[key], addPriceType }),
          ...this.initSkuDetailsFunc('single', mainUnit, mainUnitUuid),
          ...this.initSkuDetailsFunc('one'),
          ...this.initSkuDetailsFunc('two'),
          ...this.initSkuDetailsFunc('three'),
        });
      }
      return skuInfoList;
    },
    /* 获取产地信息方法 */
    getOriginalPlaceFn (data) {
      let { producingAreaName, producingAreaCode } = data;
      let { index } = this.storageCurrentRowData;
      this.tableData[index].producingAreaName = producingAreaName;
      this.tableData[index].producingAreaCode = producingAreaCode;
    },
    /* 选择产地事件 */
    handleChooseOriginalPlace ({ index }) {
      this.storageCurrentRowData.index = index;
      this.originalPlaceVisible = true;
    },
    /* 重组提交接口所需sku信息的入参方法 */
    getPackageListToApiFn () {
      let packageList = this.tableData.reduce((value, item) => {
        value.push({
          ...getBasicKeysFunc(item),
          details: this.getSkuDetailsFn(item, item.packageLayers)
        });
        return value;
      }, []);
      this.$emit('getPackageList', packageList);
    },
    /* 获取对应层数的details入参的方法 */
    getSkuDetailsFn (row, layerNum) {
      const layerList = {
        SINGLE: ['SINGLE'],
        ONE: ['SINGLE', 'ONE'],
        TWO: ['SINGLE', 'ONE', 'TWO'],
        THREE: ['SINGLE', 'ONE', 'TWO', 'THREE']
      }
      if (!layerList[layerNum]) {
        return [];
      }
      return layerList[layerNum].reduce((value, item) => {
        value.push({
          detailLayers: item,
          edge1: row[`${_.lowerCase(item)}Edge1`],
          edge2: row[`${_.lowerCase(item)}Edge2`],
          edge3: row[`${_.lowerCase(item)}Edge3`],
          volume: row[`${_.lowerCase(item)}Volume`],
          weight: row[`${_.lowerCase(item)}Weight`],
          packageCount: row[`${_.lowerCase(item)}PackageCount`],
          packageUnit: row[`${_.lowerCase(item)}PackageUnit`],
          packageUnitUuid: row[`${_.lowerCase(item)}PackageUnitUuid`],
        });
        return value;
      }, []);
    },
    /* 计算体积事件 */
    handleChangeInputNumber (data) {
      let { row, columnName } = data;
      let typeSplit = _.lowerCase(columnName).split(' '); // 转换字符串string以空格分开单词，并转换为小写,并通过split切割成对应的数组
      let type = typeSplit[0]; // 只取第一项，分别对应 single one two three四种情况
      row[`${type}Volume`] = getSkuVolumnByCalculate({ type: { start: type }, row });
    },
    /* 获取选择的主计量单位值事件 */
    handleReturnMainUnit (data) {
      let { unitName, uuid } = data;
      let { type, index } = this.storageCurrentRowData;
      this.tableData[index][type] = unitName;
      this.tableData[index][`${type}Uuid`] = uuid;
    },
    /* 选择主计量单位事件 */
    handleChooseMainUnit (data) {
      this.storageCurrentRowData = data;
      this.mainUnitVisible = true;
    },
  }
}
</script>
<style lang="less" scoped>
.package_layer {
  margin-bottom: 15px;
}
</style>
